<!DOCTYPE html>
<html>


<head>
	<meta charset="UTF-8">
	<title>可输入的下拉框（允许输入非选项值）</title>
	<link rel="stylesheet" href="../../libs/layui/layui-2.4.5/dist/css/layui.css">
	<script src="../../libs//layui/layui-2.4.5/dist/layui.js"></script>
	<style>


	</style>
</head>

<body style="margin: 10px;">

	<form class="layui-form" action="" id="formWindow">
		<div class="layui-form-item">
			<label class="layui-form-label">姓名：</label>
			<div class="layui-input-inline">
				<input name="xm" class="layui-input" lay-verify="" placeholder="请输入姓名">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">救援列车</label>
			<div class="layui-input-block" style="width: 200px;">
				<select id="jylc" name="jylc" class="layui-input" lay-verify="required" placeholder="请输入救援列车"
					lay-search>
					<option value="">请选择</option>

					<option value="鹰潭机务段-1">鹰潭机务段-1</option>
					<option value="福州机务段-2">福州机务段-2</option>
					<option value="向塘机务段-3">向塘机务段-3</option>

				</select>
			</div>
		</div>

		<div class="layerBtnCenter btn-box btn-box-1">
			<button type="button" class="layui-btn" lay-filter="submitBtnAdd" lay-submit id="saveBtn"><i
					class="iconfont"></i>取值
			</button>
			<button type="button" class="layui-btn btn-close" type="reset" id="reset"><i class="iconfont"></i>重置
			</button>
		</div>
	</form>

	<div>
		<h1>-------------------------------------</h1>
		<span>原生下拉框</span>
		<select placeholder="请输入救援列车" lay-search>
			<option value="">请选择</option>

			<option value="鹰潭机务段">鹰潭机务段-1</option>
			<option value="福州机务段">福州机务段-2</option>
			<option value="向塘机务段">向塘机务段-3</option>

		</select>
	</div>


	<script>



		layui.use(['jquery', 'layer', 'form', 'table', 'laydate', 'util', 'upload', 'element'], function () {
			var $ = layui.jquery;
			var layer = layui.layer;
			var form = layui.form;
			var laydate = layui.laydate;
			var element = layui.element;
			var table = layui.table;
			var util = layui.util;
			var layerWindow;
			var upload = layui.upload;


			var serializeFormToObject = function (formSelector) {

				var formData = {};
				formSelector.find(':input[name]').each(function () {
					var name = $(this).attr('name');
					var value = $(this).val();
					if ($(this).is('select')) {
						value = $(this).find('option:selected').val();
					}

					formData[name] = value;
				});

				// var jsonData = JSON.stringify(formData);
				return formData;
			};


			class JxCombobox {

				constructor(layuiId, $) {
					this.layuiId = layuiId;
					this.$ = $;

					init();
				}

				init() {
					// var inputStr = "";
					$($("#jylc").next()[0].children[0]).on('keyup', function (v) {


						var inputStr = $(this).find('input').val();

						$("#jylc").data("jylc-data", inputStr);

						// 删除之前的 非法的option 的dom
						if ($("#inputOption")) {
							$("#inputOption").remove();
							$("#ddOption").remove();
						}
						$("#jylc").append('<option id="inputOption" value="-1" selected>' + inputStr + '</option>')

						//先移除内部的 class="layui-this"
						$($("#jylc").next()[0].children[1]).find(".layui-this").removeClass("layui-this");

						var comboboxObj = $($("#jylc").next()[0].children[1]);
						comboboxObj.append('<dd id="ddOption" class="layui-this" lay-value="-1" >' + inputStr + '（未定义）</dd>');
						// console.log(comboboxObj.width());

						$($("#jylc").next()[0].children[0]).val(-1);



					});

					/**
					* 对已有的下拉框值 提前绑定 click 事件。
					* 如果点击了已有值，则需要提前清楚【非法值】
					*/
					$($("#jylc").next()[0].children[1]).find("dd").on('click', function (v) {

						//清除预存 非法值
						$("#jylc").data("jylc-data", "");

						//清除非法值的 dom
						// console.log($("#jylc").data("jylc-data"));
						// console.log($(this).html())
						// 删除之前的 非法的option 的dom
						if ($("#inputOption")) {
							$("#inputOption").remove();
							$("#ddOption").remove();
						}

					});
				}
			}





			// $($("#jylc").next()[0].children[0]).on('click', function (v) {
			// 	if ($("#jylc option:selected").val()) {
			// 		inputStr = $("#jylc option:selected").html();
			// 	}
			// });


			form.on('submit(submitBtnAdd)', function (data) {
				var datas = data.field;

				var dataString = JSON.stringify(datas);
				console.log(dataString);

				var ds = serializeFormToObject($("#formWindow"));
				console.log(JSON.stringify(ds));

				console.log($("#jylc").data("jylc-data"));


			});


			// $($("#jylc").next()[0].children[0]).find(":input").on('blur', function (v) {

			// 	var t = $(this);
			// 	var v = t.val();
			// 	console.log(v);
			// 	setTimeout(function(){
			// 		t.val(v);
			// 	},300)


			// });

			$("#reset").click(() => {
				// debugger
				var t = $($("#jylc").next()[0].children[0]).find(":input");
				var v = t.val();

				setTimeout(function () {
					t.val(v);
				}, 100)

			})

			// $($("#jylc").next()[0].children[0]).find('input').on('blur', function (v) {


			// 	inputStr = $(this).val();
			// 	console.log(inputStr)
			// 	// 删除先前的option
			// 	if ($("#inputOption")) {
			// 		$("#inputOption").remove();
			// 		$("#ddOption").remove();
			// 	}
			// 	$("#jylc").append('<option id="inputOption" value="'+inputStr+'" >' + inputStr + '</option>')

			// 	//先移除内部的 class="layui-this"
			// 	$($("#jylc").next()[0].children[1]).find(".layui-this").each(e=>{
			// 		$(e).removeClass("layui-this");
			// 	})
			// 	$($("#jylc").next()[0].children[1]).append('<dd id="ddOption" class="layui-this" lay-value="'+inputStr+'" >' + inputStr + '</dd>');

			// 	$(this).val(inputStr);

			// });



		});





	</script>





</body>

</html>